 <form class="form-horizontal">
  <div class="form-group">
    <label  class="col-sm-2 control-label">Query:</label>
    <div class="col-sm-10">
      <div><input type="text" ng-model="query" class="form-control"></div>
    </div>
  </div>
  <div class="form-group">
    <label  class="col-sm-2 control-label">Sort:</label>
    <div class="col-sm-10">
       <select ng-model="orderProperty" class="form-control">
             <option value="age">Age</option>
             <option value="name">Name</option>
         </select>
    </div>
  </div>

  <div class="form-group">
    <label  class="col-sm-2 control-label">Make a choice:</label>
    <div class="col-sm-10">
       <select class="form-control"
      ng-options="option.name for option in data.availableOptions track by option.id"
      ng-model="data.selectedOption"></select>
    </div>
    <div class="col-sm-10">{{data.selectedOption}}</div>
  </div>

  <div>order:{{orderProperty}}</div>
  <div>user:{{user}}</div>
  <div><input class="btn btn-primary" type="button" ng-click="getPhones()" value="Get Phones"/></div>
<div class="form-group">
 <<ul>
    <li ng-repeat="phone in phones | filter:query |orderBy:orderProperty" class="phone-list-item">
    <a href="#!/phones/{{phone.id}}" >
     {{phone.name}}
    </a>
    <a href="#!/phones/{{phone.id}}">{{phone.name}}</a>
    <p>{{phone.snippet}}</p>
  </li>
  </ul>
 </div>
</form>
 
 
 
 